import React, { useEffect, useState } from 'react'
import './cha.css'
import { GOODS,TEXT } from '../../axios' 
import { useNavigate, useParams } from 'react-router-dom'
import { Tabs, NavBar } from 'react-vant'
export default function Channel() {
  let navigate = useNavigate()
    let [ data,setData ] = useState([])
    let [ tit,setTit ] = useState([])
    let { id } = useParams()
    let [ mr,setMr ] = useState(0)
    let [ list,setList ] = useState([])
    // console.log(id);
    useEffect(() => {
        GOODS(id).then(res => {
            setData(res.data.data.brotherCategory)
            setTit(res.data.data.currentCategory)
            let a = res.data.data.brotherCategory.findIndex(item => item.id == id)
            // console.log(a);
            setMr(a)
            getList()
        })
    },[])
    const getList = (ids=id) => {
        TEXT(ids).then(res => {
            // console.log(res,999);
            if(res.status === 200){
                setList(res.data.data.data)
            }
        })
    }
    const tab = (value) => {
        // console.log(value);
        let ids = data[value.name].id
        getList(ids)
    }                                                                                                            
  return (
    <div>
      <NavBar
        title="标题"
        leftText="返回"
        onClickLeft={() => navigate(-1)}
      />
        {data.length > 0 && <Tabs 
        defaultActive={mr}
        onClickTab={tab}
        autoHeight={false}
        >
            {
                data.map(item => {
                    console.log(item);
                    return <Tabs.TabPane key={item.id} title={item.name} >
                        {list.length > 0 && <ul className='cha-ul'>
                            {
                                list.map(item => {
                                    return <li key={item.id} className='cha-li'>
                                        <img className='cha-img' src={item.list_pic_url} alt="" />
                                        <p className='cha-tit'>{ item.name }</p>
                                        <p className='cha-price'>￥ { item.retail_price }</p>
                                    </li>
                                })
                            }
                        </ul>}
                    </Tabs.TabPane>
                })
            }
      </Tabs>}
      
    </div>
  )
}